﻿<template>
  <div class="U0000024-template1" :class="className">
    <!-- style -->
    <!--<div v-html="css"></div>-->

    <!--微社区静态-->
    <van-tabs
      v-model="active"
      style="width: 100%;"
      swipeable
      v-if="!tabcontrol && datas.get_style == 1"
      @change="getClassificationBtn"
      :background="datas.tab_bg"
      :title-active-color="datas.title_active_color"
      :color="datas.title_active_color"
      :title-inactive-color="datas.title_color"
    >
      <!-- 模板一  -->
    <template v-if="show_template=='1'">
      <template v-for="(item, index) in cate">
        <van-tab :title="item.name" :key="index">
          <!-- <template v-if="cateList[index]"> -->
            <div class="video_list">
              <c-flow :id="id"
                :showLoading="showLoading" :isDiy="true" :isLoadMore="isLoadMore"
                @loadMore="loadMore" @getMore="getMoreData" :datas="datas"
                :list="cateList"
                v-if="active == index"
              ></c-flow>
            </div>
          <!-- </template> -->
        </van-tab>
      </template>
    </template>
      <!-- 模板二  -->
      <template v-else>
        <template v-for="(item, index) in cate">
          <van-tab :title="item.name" :key="index">
            <!-- <template v-if="cateList[index]"> -->
              <div class="video_list">
                <micro-communities :showLoading="showLoading"  @loadMore="loadMore"  :datas="datas" :isDiy="true" :isLoadMore="isLoadMore" @getMore="getMoreData" :list="cateList" v-if="active == index"></micro-communities>
              </div>
            <!-- </template> -->
          </van-tab>
        </template>
      </template>
    </van-tabs>
    <template v-if="tabcontrol && (datas.get_style == 1 || !datas.get_style)">
      <div class="video_list">
        <c-flow v-if="show_template == '1'" :id="id" :showLoading="showLoading" :isDiy="true" :isLoadMore="isLoadMore" @loadMore="loadMore" @getMore="getMoreData" :datas="datas" :list="cateList"></c-flow>
        <micro-communities v-if="show_template == '2'" :showLoading="showLoading"  @loadMore="loadMore" :datas="datas"  :isDiy="true" :isLoadMore="isLoadMore" @getMore="getMoreData" :list="cateList"></micro-communities>
      </div>
    </template>
    <template v-if="datas.get_style == 2">
      <div class="video_list">
        <c-flow  v-if="show_template == '1'" :id="id" :showLoading="showLoading" :isLoadMore="isLoadMore" :datas="datas" :list="cateList"></c-flow>
        <micro-communities v-if="show_template == '2'" :showLoading="showLoading"   :isLoadMore="isLoadMore"  :datas="datas"  :list="cateList"></micro-communities>
      </div>
    </template>
  </div>
</template>

<script>
// import { Toast } from 'vant';
import cFlow from "components/Waterfalls_flow";
import MicroCommunities from "components/micro_communities";
export default {
  props: ["id", "datas", "tabcontrol", "store_id","isBottom", "lastIndex", "index", "isLast"],
  data() {
    return {
      active: 0,
      cate: [{name:'最新',id: -2}],
      cateList: [],
      address: "",
      city: "",
      point: "",
      show_template:"1",
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
      getMoreDataType: "newClassification",
      cateMoreData: {},
      showLoading: false,

      arrIndex: 1,
      per_page: 15,
      allLoaded: false, // 全部数据已经加载完成
      alreadyHandleArray: [],
    };
  },
  mounted() {
    if (this.datas.show_template) {
      this.show_template = this.datas.show_template;
    }
    if(this.datas.list.micro_style_type=="1"){
      this.show_template ="2";
    }
    if(this.datas.list.micro_style_type=="0"){
      this.show_template ="1";
    }
    if (this.tabcontrol) {
      if (Number(this.datas.get_number) > 0) {
        this.getFirstData(this.datas.list);
      }
    } else {
      if(this.datas.show_nearby){
        this.cate.push({name:'附近',id: -1});
        this.fun.getLocation()
          .then((res) => {
            this.point = res.point;
            this.title = res.title;
            this.city = res.city;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      if (this.datas.cate) {
        this.getHomePageData(this.datas.cate);
      }

      if (this.datas.get_style == 2) {
        // 手动选择
        this.showLoading = true;
        this.isLoadMore = false;
        this.cateList = this.datas.list;
      } else {
        if (Number(this.datas.get_number) > 0 && this.datas.list) {
          this.getFirstData(this.datas.list);
        }
      }
    }
  },
  computed: {
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  components: {
    cFlow,
    MicroCommunities
  },
  watch: {
    isBottom: function(newVal, oldVal) {
      console.log(this.lastIndex, "lastIndex");
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.isLoadMore) {
          this.getMoreData();
        } else if (this.page >= this.total_page) {
          if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0) {
            this.cateList = this.cateList.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
            this.arrIndex = this.arrIndex + 1;
          }
        }
      } else {
        // this.lastIndex == this.index判断商品列表是最后一个组件
        if (newVal && this.lastIndex == this.index && this.isLoadMore) {
          this.getMoreData();
        } else if (this.page >= this.total_page) {
          if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0) {
            this.cateList = this.cateList.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
            this.arrIndex = this.arrIndex + 1;
          }
        }
      }
    }
  },
  methods: {
    getHomePageData(data) {
      if (data) {
        this.cate = this.cate.concat(data);
      }
    },
    getFirstData(data) {
      this.showLoading = false;
      this.isLoadMore = false;
      this.total_page = data.last_page;
      this.cateList = data.data;
      this.per_page = this.datas.list.per_page || 15;
      this.page = this.datas.list.current_page;
      this.alreadyHandleArray = this.datas.list.data;
      if(this.cateList.length > this.datas.get_number) {
        this.cateList.splice(this.datas.get_number,this.cateList.length-this.datas.get_number);
        this.isLoadMore = false;
        this.allLoaded = true;
      }
    },
    loadMore() {
      console.log("更多");
      this.showLoading = true;
      if (this.total_page <= 1 || this.page >= this.total_page) {
        this.isLoadMore = false;
      }else {
        this.cateList.length >= this.datas.get_number ? this.isLoadMore = false : this.isLoadMore = true;
      }
      this.$emit("setLoadMore", this.isLoadMore);
    },
    getClassificationBtn(index, title) {
      this.cateList = [];
      this.getClassification();
    },
    getClassification(type, id, index) {
      let that = this;
      let dataJson = {};
      this.showLoading = false;
      that.pageInit();
      if (Number(this.cate[this.active].id) > 0) {
        dataJson.cat_id = this.cate[this.active].id;
      } else {
        if (this.cate[this.active].id == -2) {
          dataJson.trick_new = 1;
        } else if (this.cate[this.active].id == -1) {
          let p = this.fun.bd_encrypt(this.point.lng, this.point.lat);
          dataJson.lng = p.lng;
          dataJson.lat = p.lat;
          dataJson.city_name = this.city;
          dataJson.address = this.city;
        }
      }

      if(this.store_id) {
        dataJson.store_id = this.store_id;
      }
      $http
        .post("plugin.micro-communities.api.index.getStick", dataJson, "", true)
        .then(response => {
          this.showLoading = true;
          this.isLoadMore = true;
          if (response.result == 1) {
            that.total_page = response.data.last_page;
            that.cateList = response.data.data;
            if(this.cateList.length > this.datas.get_number) {
              this.cateList.splice(this.datas.get_number, this.cateList.length-this.datas.get_number);
              this.isLoadMore = false;
            }
          } else {
            that.page = that.page - 1;
            that.isLoadMore = false;
          }
        },function (response) {
          that.showLoading = true;
          that.isLoadMore = false;
        });
    },
    pageInit() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    getMoreData() {
      const that = this;

      if (this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length >= this.per_page) {
        // 一页的数据超过per_page不另外请求接口
        this.cateList = this.cateList.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
        this.arrIndex = this.arrIndex + 1;

        if (!this.fun.isTextEmpty(this.datas.get_number) && this.cateList.length > this.datas.get_number) {
          this.cateList = this.cateList.slice(0, this.datas.get_number);
          this.isLoadMore = false;
          this.allLoaded = true;
        }
        return;
      } else if (this.page >= this.total_page && this.alreadyHandleArray.slice(this.per_page * this.arrIndex).length > 0) {
        // 最后一页剩余的数据加载
        this.cateList = this.cateList.concat(this.alreadyHandleArray.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1)));
        if (!this.fun.isTextEmpty(this.datas.get_number) && this.cateList.length > this.datas.get_number) {
          this.cateList = this.cateList.slice(0, this.datas.get_number);
        }
        this.isLoadMore = false;
        this.allLoaded = true;
        return;
      }
      that.isLoadMore = false; // 防止多次请求分页数据
      let json = {};
      if(this.cateList.length >= this.datas.get_number) {
        return;
      }
      if (this.cate[this.active].id == -2) {
        json.trick_new = 1;

      } else if (this.cate[this.active].id == -1) {
        let p = this.fun.bd_encrypt(this.point.lng, this.point.lat);
        json.lng = p.lng;
        json.lat = p.lat;
        json.city_name = this.city;
        json.address = this.city;
        // if(this.nearbyClassification.length >= this.datas.get_number) {
        //   return;
        // }
      } else {
        json.cat_id = this.cate[this.active].id;
      }

      if(this.store_id) {
        json.store_id = this.store_id;
      }

      this.page = this.page + 1;
      json.page = this.page;
      this.showLoading = false;
      $http
        .post(
          "plugin.micro-communities.api.index.getStick",
          json,
          "加载中..."
        )
        .then((response)=> {
          if (response.result === 1) {
            var myData = response.data.data;
            that.cateList = that.cateList.concat(myData);
            if(this.cateList.length > this.datas.get_number) {
              this.cateList.splice(this.datas.get_number, this.cateList.length-this.datas.get_number);
              this.isLoadMore = false;
            }
          } else {
            that.page = that.page - 1;
            that.isLoadMore = false;
          }
          that.showLoading = true;
        },
        function (response) {
          that.showLoading = true;
          that.isLoadMore = false;
        }
        );
    }
  }
};
</script>

<style lang="scss" scoped>
// 默认
.component-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.video_list {
  width: 100%;
}
</style>
